window.onload = function () {
    function loadCanvas(element) {
        var parentNode = document.querySelector(element);
        var canvas = document.createElement("canvas");
        canvas.height = parentNode.clientHeight;
        canvas.width = parentNode.clientWidth;
        parentNode.appendChild(canvas);
        window.addEventListener("resize", function () {
            canvas.height = parentNode.clientHeight;
            canvas.width = parentNode.clientWidth;
        });
        return canvas
    };

    function init_Shader(gl) {


        var VERTEX_SHADER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'attribute float a_PointSize;\n' +
            'void main(){\n' +
            'gl_Position = a_Position;\n' +
            'gl_PointSize = a_PointSize;\n' +
            '}\n';

        var FRAGMENT_SHADER_SOURCE =
            'void main(){\n' +
            'gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n' +
            '}';

        // 1.1创建着色器对象
        var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
        var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);

        // 1.2装载着色器资源
        gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
        gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);

        // 1.3编译着色器
        gl.compileShader(vertex_shader_object);
        gl.compileShader(fragment_shader_object);

        // 2.1创建程序
        var program = gl.createProgram();

        // 2.2.附着着色器对象到program
        gl.attachShader(program, vertex_shader_object);
        gl.attachShader(program, fragment_shader_object);

        // 2.3.链接program
        gl.linkProgram(program);

        // 2.4.使用program
        gl.useProgram(program);

        return program;
    };

    function drawTriangle(gl, program) {
        var a_Position = gl.getAttribLocation(program, "a_Position");
        var a_PointSize = gl.getAttribLocation(program,"a_PointSize");

        // 创建位置与颜色数组
        var verticeWithSize = new Float32Array(
            [
                0.0,0.5,10.0,
                0.5,0.5,20.0,
                0.5,-0.5,25.0
            ]
        );
        var FSIZE = verticeWithSize.BYTES_PER_ELEMENT;

        // 处理位置缓冲区
        var vertexBuffer = gl.createBuffer(gl.ARRAY_BUFFER);
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, verticeWithSize, gl.STATIC_DRAW);
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * (verticeWithSize.length/3), 0);
        gl.enableVertexAttribArray(a_Position);

        // 处理点尺寸缓冲区
        var pointSize_vertexBuffer = gl.createBuffer(gl.ARRAY_BUFFER);
        gl.bindBuffer(gl.ARRAY_BUFFER, pointSize_vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, verticeWithSize, gl.STATIC_DRAW); // 步进FSIZE*3位，起点从SIZE*0 开始
        gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * (verticeWithSize.length/3), FSIZE * 2); // 步进FSIZE*3位，起点从SIZE*2 开始
        gl.enableVertexAttribArray(a_PointSize);

        gl.clearColor(.0, .0, .0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.POINTS, 0, 3);
    };

    
    var canvas = loadCanvas("#container");
    var gl = canvas.getContext("webgl");
    var program = init_Shader(gl);
    drawTriangle(gl,program);
}